<template>
	<view>
		<view class="main">
			<textarea placeholder="说点什么吧~(200字)" maxlength="200" value="" />

			<u-checkbox-group @change="change">
				<u-checkbox v-model="checked" shape="circle">展示店铺</u-checkbox>
			</u-checkbox-group>
		</view>

		<u-upload width="215" height="215" max-count="9" max-size="1024*7" image-mode="aspectFill" class="upload" ref="uUpload"
		 :action="action" :auto-upload="false" del-bg-color="#000" :file-list="fileList"></u-upload>
		<view class="bottom"></view>
		<view class="fabu" @click="submit">
			发布
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				checked: false,
				action: 'http://www.example.com/upload',
				fileList: []
			}
		},
		methods: {
			change() {
				console.log(this.checked);
			},
			submit(){
				// console.log(this.$refs);
				this.$refs.uUpload.upload();
				console.log(this.$refs.uUpload);
				console.log(this.$refs.uUpload.lists);
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F2F4FA;
	}

	.main {
		padding: 31rpx 32rpx 0 32rpx;
		margin: 26rpx 0 0 30rpx;
		width: 690rpx;
		height: 570rpx;
		background: #FFFFFF;
		border-radius: 40rpx;

		textarea {
			width: 630rpx;
			height: 440rpx;
		}
	}
	.bottom{
		width: 750rpx;
		height: 400rpx;
	}
	/deep/ .u-add-wrap{
		background-color: #fff;
	}
	.upload{
		margin: 41rpx 0 0 30rpx;
	}
	
	.fabu{
		text-align: center;
		position: fixed;
		bottom: 100rpx;
		left: 30rpx;
		width: 690rpx;
		height: 100rpx;
		background: #181818;
		box-shadow: 0px 10rpx 40rpx 0px rgba(24, 24, 24, 0.26);
		border-radius: 50rpx;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		line-height: 55px;
	}
</style>
